<template>
  <div >
    <el-dialog
        title="新增承租人"
        :visible.sync="dialogVisible"
        width="50%"
        @close="resetForm"
        custom-class="right-dialog">
      <el-descriptions title="承租人信息">
      </el-descriptions>
      <el-form :model="dialogForm" ref="dialogForm" label-width="100px">
        <el-form-item label="照片：" prop="faceUrl">
          <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :http-request="handleUploadForm"
              :headers="myHeaders"
              :before-upload="beforeAvatarUpload">
            <img v-if="dialogForm.faceUrl" :src="imageUrl + dialogForm.faceUrl" class="avatar" alt="">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名：" prop="name" required>
          <el-input v-model="dialogForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" prop="name" required>
          <el-input v-model="dialogForm.name" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="工作单位：" prop="parent">
          <el-input v-model="dialogForm.parent" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="parent">
          <el-input v-model="dialogForm.parent" placeholder="请输入联系电话"></el-input>
        </el-form-item>
      </el-form>
      <el-descriptions title="家庭成员">
      </el-descriptions>
      <el-table
          border
          style="width: 100%">
        <el-table-column prop="date" label="家庭成员姓名" width="180">
          <el-input v-model="dialogForm.name" placeholder="请输入单元名称"></el-input>
        </el-table-column>
        <el-table-column prop="name" label="与承租人关系" width="180">
          <el-input v-model="dialogForm.name" placeholder="请输入单元名称"></el-input>
        </el-table-column>
        <el-table-column prop="address" label="家庭成员工作单位">
        </el-table-column>
        <el-table-column prop="address" label="家庭成员联系方式">
        </el-table-column>
        <el-table-column prop="address" label="是否紧急联系人">
        </el-table-column>
        <el-table-column align="center" label="操作" width="320">
          <template slot-scope="scope">

            <el-button icon="el-icon-edit" size="mini" type="primary"  @click="handlerEdit(scope.row)"
                       v-has-permi="['admin:house:information:save']">编辑
            </el-button>
            <el-button icon="el-icon-delete" size="mini" type="danger" @click="handlerDelete(scope.row.id)"
                       v-has-permi="['admin:house:information:delete']">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {upload} from "@/api/upload";
import {getToken} from "@/utils/auth";

export default {
  name: 'addLessee',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogForm: {
        name: '',
        parent: '',
        faceUrl: '',
        status: false,
        sort: 1
      },
      myHeaders: {"token": getToken()},
      imageUrl: '',
      showAdd:true,
    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
  },
  methods: {
    // 重置表单
    resetForm() {
      this.$refs.dialogForm.resetFields();
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    submitForm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // 这里可以添加提交表单的逻辑，例如发送API请求保存数据
          console.log('提交单元管理表单', this.dialogForm);
          this.closeDialog();
        } else {
          console.log('表单验证失败');
        }
      });
    },

    handleAvatarSuccess(res, file) {
      this.form.cover = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleUploadForm(param) {
      const formData = new FormData();
      //0=>maintain 全部
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      upload(formData)
          .then((res) => {
            this.form.cover = res
            //图片上传接口 后期调用
            loading.close();
            this.$message.success("上传成功");
          }).catch((res) => {
        loading.close();
      });
    },
    handlerEdit(row){//切换编辑状态
      this.$set(row,'edit',true);
      this.showAdd=false;
    },



  }
}
</script>

<style scoped>

</style>
